<template>
  <div id="app">
    <div class="nav">
      <span>英雄列表</span>
      <button class="btn" @click="search">搜 索</button>
      <input
        class="search"
        v-model.trim="name"
        @keyup.enter="search"
        type="text"
        placeholder="请输入英雄名称进行搜索"
      />
    </div>
    <div class="content">
      <!-- 人物列表 -->
      <ul class="list" ref="ul">
        <li
          v-for="(item, index) in list"
          :key="item.heroId"
          class="item"
          :class="{ active: index == idx }"
          @click="changeHero(index)"
        >
          {{ item.title }}
        </li>
      </ul>
      <!-- 人物详情 -->
      <div class="info">
        <div class="name">英雄姓名: {{ hero.title }} -- {{ hero.name }}</div>
        <div class="img">
          <img :src="hero.icon" alt="" />
        </div>
        <div class="tags">
          <h5>英雄技巧：</h5>
          <ul>
            <li v-for="(item, index) in hero.allytips" :key="index">
              {{ item }}
            </li>
          </ul>
        </div>
        <div class="story">
          <h5>英雄故事：</h5>
          {{ hero.shortBio }}
        </div>
      </div>
    </div>
    <div class="noData">暂无数据</div>
  </div>
</template>

<script>
import axios from "axios";
axios.defaults.baseURL = "http://ajax.zllhyy.cn/";

export default {
  data() {
    return {
      list: [],
      idx: 0,
      hero: {},
      // 给搜索的输入框做双向绑定
      name: "",
    };
  },

  methods: {
    changeHero(index) {
      // 把被点的下标赋值给动态类的变量，那么界面就会变了
      this.idx = index;

      // 拿到被点的数据的id，然后发请求给接口
      axios({
        url: "lol/info",
        // get请求参数
        params: {
          id: this.list[index].heroId,
        },
      }).then((res) => {
        // console.log(res);
        this.hero = res.data.data.hero;
      });
    },

    // 搜索的事件
    search() {

      // 1. 非空判断
      if (this.name == '') return alert('请输入要搜索的英雄名字')

      // 2. 去做搜索
      // 拿到输入的内容，去数组中查找下标
      let idx = this.list.findIndex( v => v.title == this.name) 

      // 判断是否找到
      if (idx == -1) return alert('查无此人')

      // 能来到这，就证明找到了，找到了就根据下标得到id再发请求
      this.changeHero(idx)

      // 然后让滚动条滚动到对应的li那里
      // 设置什么属性可以让滚动条滚动？？设置scrollTop
      // 设置多少？？？ 要显示哪个下标的li,就设置下标*li的高度
      // 设置谁？？设置ul，因为滚动条是ul的
      // 我们需要先找到ul
      // let ul = document.querySelector('.list') // 这句代码后面不用了

      // 使用refs来找到元素
      this.$refs.ul.scrollTop = idx * this.$refs.ul.children[0].offsetHeight
    },
  },

  // 什么时候发请求？在最早能访问到数据的钩子里发
  created() {
    // 查出左侧英雄列表
    axios({
      url: "lol/search",
    }).then((res) => {
      this.list = res.data.data;
      // 当左侧有内容后，就默认去查下标0的数据
      this.changeHero(0);
    });
  },
};
</script>


<style>
* {
  padding: 0;
  margin: 0;
  list-style: none;
}

html,
body {
  width: 100%;
  height: 100%;
}

#app {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  min-width: 650px;
  overflow: hidden;
}

.content {
  width: 100%;
  border: 1px solid #00a383;
  height: calc(100% - 35px);
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
}

.nav {
  height: 40px;
  padding-left: 15px;
  line-height: 40px;
  font-weight: bold;
  color: #00a383;
  border-bottom: 3px solid #00a383;
}

.search {
  float: right;
  width: 300px;
  height: 25px;
  margin-top: 5px;
}

.btn {
  float: right;
  margin-left: 30px;
  margin-right: 40px;
  margin-top: 5px;
  width: 80px;
  height: 29px;
}

.list {
  height: calc(100%-45px);
  overflow: auto;
  flex: 0 0 200px;
}

.item {
  padding-left: 15px;
  line-height: 30px;
  cursor: pointer;
  transition: all 0.5s;
}

.active,
.item:hover {
  color: #fff;
  background: #00a383 !important;
}

.item:nth-child(odd) {
  background: rgba(0, 0, 0, 0.1);
}

.info {
  display: inline-block;
  flex: 1 1 auto;
  height: 100%;
  overflow-y: auto;
}

.name {
  text-align: center;
  line-height: 30px;
  border-bottom: 1px solid #ccc;
  font-weight: bold;
  margin-top: 15px;
}

.tags,
.story {
  padding: 30px;
}

.tags > span {
  margin-right: 30px;
}

.img {
  margin: 15px 0;
  text-align: center;
  max-height: 45%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.imgChangeBtn {
  display: inline-block;
  vertical-align: top;
  width: 50px;
  height: 30px;
  cursor: pointer;
  opacity: 0.7;
  transition: all 0.5s;
}

.imgChangeBtn:hover {
  opacity: 1;
}

.btnLeft {
  background: no-repeat center center
    url();
}

.btnRight {
  background: no-repeat center center
    url();
}

.img > img {
  width: 50%;
  height: 100%;
  object-fit: cover;
}

.noData {
  margin-top: 30px;
  text-align: center;
}

h5 {
  font-size: 14px;
}
</style>
